@extends('layouts.root')

@section('title' , '客户后台')


<!-- 主体内容 -->
@section('contents')

    <!-- 主体内容 -->
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">设置我的资料</div>
                    <div class="layui-card-body" pad15>

                        <div class="layui-form" lay-filter="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">帐号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="account" value="{{ $user->account }}" readonly class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">不可修改。一般用于后台登入名</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户昵称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="name" value="{{ $user->name }}" autocomplete="off" placeholder="请输入昵称" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">用户昵称</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">邮箱</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="email" value="{{ $user->email }}" readonly class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">用户邮箱</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">头像</label>
                                <div class="layui-input-inline">
                                    <input name="avatar" lay-verify="required" id="LAY_avatarSrc" placeholder="用户头像" readonly value="{{ $user->avatar }}" class="layui-input">
                                </div>
                                <div class="layui-input-inline layui-btn-container" style="width: auto;">
                                    <button type="button" class="layui-btn layui-btn-primary" id="LAY_avatarUpload">
                                        <i class="layui-icon">&#xe67c;</i>上传图片
                                    </button>
                                    <img src="{{ $user->avatar }}" height="50" id="img_avatar" alt="">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="setmyinfo">确认修改</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重新填写</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('scripts')
    <script>
        layui.config({
            base: '/layuiadmin/'
        }).extend({
            index: 'lib/index',
        }).use(['index','form','upload'],function(){
            var $ = layui.$
                ,form = layui.form
                ,upload = layui.upload
                ,layer = layui.layer;

            layer.closeAll();
            //普通图片上传
            var uploadInst = upload.render({
                elem: '#LAY_avatarUpload'
                ,url: '{{ route('zbsuser.index.upImage') }}' //
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        //$('#LAY_avatarSrc').attr('value', result); //图片链接（base64）
                    });
                }
                ,done: function(res){
                    //如果上传失败
                    if(res.code <= 0){
                        return layer.msg('上传失败',{time:1500});
                    }else{
                        $('#LAY_avatarSrc').attr('value', res.path);
                        $('#img_avatar').attr('src', res.path);
                        return layer.msg('上传成功',{time:1000});
                    }
                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
            });


            form.on('submit(setmyinfo)',function(data){
                var field = data.field;

                $.ajax({
                    method:'PATCH',
                    url: '{{ route('zbsuser.index.update' , $user->id) }}'
                    ,data: field
                    ,dataType:'json'
                    ,success:function(res){
                        if (res.code){
                            layer.msg(res.msg , {icon:6,time:1000},function(){
                                layer.closeAll();
                            });
                        }else{
                            layer.msg(res.msg , {icon:5,time:1000},function(){
                            });
                        }

                    }
                    ,error:function(err){
                        var parseJSON = err.responseJSON.errors;
                        var html = '';
                        $.each(parseJSON , function(k , v){
                            html += v + '<br>';
                        });
                        layer.msg(html , {icon:5,time:1500})
                    }
                })
            });



        });
    </script>
@endsection